<template>
  <viewer
    :name="name"
    v-bind="definition"
    :event="event"
    @redirect="redirect"
  />
</template>

<script>
import Viewer from './Viewer'
/**
 * 这是个具有路由功能的组件,
 *     根据store的数据渲染由layer指定图层
 *     通过 this.$store.dispatch('reView', { layer, url })来更新视图
 */
export default {
  created () {
    this.$store.commit('setupView', this.layer)
  },
  beforeDestroy () {
    this.$store.commit('dropView', this.layer)
  },
  computed: {
    /**
     * 视图名称
     */
    name () {
      return this.$store.state.views[this.layer].name
    },
    /**
     * 视图定义
     */
    definition () {
      return this.$store.state.views[this.layer].definition
    },
    /**
     * 事件处理
     */
    event () {
      return this.$store.state.views[this.layer].event || {}
    }
  },
  props: {
    /**
     * 视图层
     */
    layer: {
      type: String,
      default: 'main'
    },
    /**
     * 事件等的命名空间
     */
    ns: {
      type: String,
      default: ''
    }
  },
  components: {
    Viewer
  },
  methods: {
    async redirect ({ url, layer = this.layer }) {
      (this.layer + '') === (layer + '') && await this.$store.dispatch('reloadViewByUrl', {
        layer,
        url
      })
    }
  }
}
</script>

<style scoped>

</style>
